<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商城主页面</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- --------------------页眉板块-------------------- -->
<div class="header">
    <!-- 设置logo -->
    <div class="logo">
        <img src="image/logo.png">
    </div>
    <!-- 设置菜单 -->
    <div class="menu" onmouseleave="show_menu1()">
        <div class="menu_title" onclick="show_menu()">
            <a href="#">内容分类1</a></div>
        <ul id="menu1">
            <li>东西1</li>
            <li>东西2</li>
        </ul>
    </div>
    <div class="menu" onmouseleave="show_menu12()">
        <div class="menu_title" onclick="show_menu()">
            <a href="#">内容分类2</a></div>
        <ul id="menu12">
            <li>东西1</li>
            <li>东西2</li>
        </ul>
    </div>
    <div class="menu" onmouseleave="show_menu13()">
        <div class="menu_title" onclick="show_menu()">
            <a href="#">内容分类2</a></div>
        <ul id="menu123">
            <li>东西1</li>
            <li>东西2</li>
        </ul>
    </div>
    <!-- 设置用户登录 -->
    <div class="auth">
        <ul>
            <li><a href="trollery.html">购物车</a></li>
            <li><a href="personal.html">个人信息</a></li>
            <li><a href="reg.html">注册</a></li>
            <li><a href="login.html">登录</a></li>
        </ul>
    </div>
</div>

<!-- --------------------正文板块-------------------- -->
<div class="content">
    <!-- 设置广告栏 -->
    <div class="banner">
        <img src="image/welcome.png" class="banner_img">
    </div>
    <div class="img_content">
        <ul>
            <li>
                <img src="image/wumingnvlang.jpg" class="img_li">
                <div class="info">
                    <h3>图片</h3>
                    <p>
                        描述
                    </p>
                    <div class="img_btn">
                        <!-- 价格，购买logo -->
                        <div class="price">¥ 2300</div>
                        <!-- 购物车按钮 -->
                        <div class="btn">
                            <a href="#" class="cart">
                                <img src="image/cart.svg">
                            </a>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <img src="image/wudaojiaoshi.jpg" class="img_li">
                <div class="info">
                    <h3>图片</h3>
                    <p>
                        描述
                    </p>
                    <div class="img_btn">
                        <!-- 价格，购买logo -->
                        <div class="price">¥ 2300</div>
                        <!-- 购物车按钮 -->
                        <div class="btn">
                            <a href="#" class="cart">
                                <img src="image/cart.svg">
                            </a>
                        </div>
                    </div>
                </div>
            </li>


            <li>
                <img src="image/wumingnvlang.jpg" class="img_li">
                <div class="info">
                    <h3>图片</h3>
                    <p>
                        描述
                    </p>
                    <div class="img_btn">
                        <!-- 价格，购买logo -->
                        <div class="price">¥ 2300</div>
                        <!-- 购物车按钮 -->
                        <div class="btn">
                            <a href="#" class="cart">
                                <img src="image/cart.svg">
                            </a>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <img src="image/wudaojiaoshi.jpg" class="img_li">
                <div class="info">
                    <h3>图片</h3>
                    <p>
                        描述
                    </p>
                    <div class="img_btn">
                        <!-- 价格，购买logo -->
                        <div class="price">¥ 2300</div>
                        <!-- 购物车按钮 -->
                        <div class="btn">
                            <a href="#" class="cart">
                                <img src="image/cart.svg">
                            </a>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <img src="image/wumingnvlang.jpg" class="img_li">
                <div class="info">
                    <h3>图片</h3>
                    <p>
                        描述
                    </p>
                    <div class="img_btn">
                        <!-- 价格，购买logo -->
                        <div class="price">¥ 2300</div>
                        <!-- 购物车按钮 -->
                        <div class="btn">
                            <a href="#" class="cart">
                                <img src="image/cart.svg">
                            </a>
                        </div>
                    </div>
                </div>
            </li>

            <li>
                <img src="image/wudaojiaoshi.jpg" class="img_li">
                <div class="info">
                    <h3>图片</h3>
                    <p>
                        描述
                    </p>
                    <div class="img_btn">
                        <!-- 价格，购买logo -->
                        <div class="price">¥ 2300</div>
                        <!-- 购物车按钮 -->
                        <div class="btn">
                            <a href="#" class="cart">
                                <img src="image/cart.svg">
                            </a>
                        </div>
                    </div>
                </div>
            </li>
        </ul>

    </div>
    <!-- 分页 -->
    <div class="page_nav">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">上一页</a></li>
            <li><span class="first_page">1</span></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">下一页</a></li>
            <li><a href="#">尾页</a></li>
        </ul>
    </div>

</div>
<!-- --------------------页脚板块-------------------- -->
<div class="footer">
    <p class="p2">三组项目<span>主页面</span></p>
</div>
<script src="js/vue.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
